<template>
  <div id="index">
    <div class="tab-box">
      <input type="radio" name="demo" id="tab-switch-input1" checked="" @click="show">
      <input type="radio" name="demo" id="tab-switch-input2" @click="show1">
      <div class="tab-box-label">
        <label class="personal" for="tab-switch-input1">
          <span>酒店点评</span>
        </label>
        <label class="enterprise" for="tab-switch-input2">
          <span>服务点评</span>
        </label>
      </div>
      <!-- 酒店点评 -->
      <div class="tab-contents">
        <div class="tab-content personal-main" v-show="isshow">
          <group>
            <cell title="酒店点评">
              <rater v-model="star" :min="min" star="☻" active-color="#FF9900" :margin="4"></rater>
              <span>{{rateing}}</span>
            </cell>
          </group>
          <div class="complaints">
            <div class="complaints-title">投诉建议</div>
            <textarea class="complaints-content" placeholder="说说你的入住感受，欢迎对我们提出建议~" v-model="contents"></textarea>
          </div>
          <!-- 图片上传 -->
        <div class="hello">
          <el-upload
            accept="image/jpeg,image/gif,image/png,image/bmp"
            :action="api()"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="success"
            :file-list="fileList"
            :limit="8"
            :multiple="true">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <div class="footer-btn" @click="submitHotel()">
          提交
        </div>
      </div>
      <!-- 服务点评 -->
      <div class="tab-content personal-main" v-show="isshow1">
        <group>
          <cell title="酒店点评">
            <rater v-model="startwo" :min="min" star="☻" active-color="#FF9900" :margin="4"></rater>
            <span>{{score}}</span>
          </cell>
        </group>
        <div class="complaints">
          <div class="complaints-title">投诉建议</div>
          <textarea class="complaints-content" placeholder="说说你的入住感受，欢迎对我们提出建议~" v-model="contents1"></textarea>
        </div>
        <div class="hello">
          <el-upload
            accept="image/jpeg,image/gif,image/png,image/bmp"
            :action="api()"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="success"
            :file-list="fileList"
            :limit="8"
            :multiple="true">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
        <div class="footer-btn" @click="submitServer()">
          提交
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import apis from '../../../static/js/apis'
import { Rater, Group, Cell, Range, querystring } from 'vux'
export default {
  components: {
    Rater,
    Group,
    Cell,
    Range,
    apis
  },
  data () {
    return {
      min: 1,
      startwo: '5',
      star: '5',
      dialogImageUrl: '',
      dialogVisible: false,
      imglist: [],
      fileList: [],
      contents: '',
      contents1: '',
      isshow: true,
      isshow1: false,
      useridbbj: {},
      userid: ''
    }
  },
  created () {
    this.useridobj = querystring.parse()
    this.userid = this.useridobj.wxuserinfoid
    localStorage.setItem('userId', this.userid)
  },
  methods: {
    api () {
      return apis + '/shenglian-fast/app/weixinapp/upload'
    },
    show () {
      this.isshow = true
      this.isshow1 = false
    },
    show1 () {
      this.isshow = false
      this.isshow1 = true
    },
    // 上传前删除
    handleRemove (file, fileList) {
      let than = this
      let detealname = file.response.name // 当前删除的图片
      let name = []
      than.imglist = []
      fileList.forEach(ele => {
        name.push(ele.response.name)
      })
      than.imglist = name // 删除后图片的数组
      than.$axios
        .post(apis + '/shenglian-fast/app/weixinapp/picdelete', {
          name: detealname
        })
        .then(response => {
          if (response.data.msg === 'success') {
            this.$dialog.toast({mes: '删除成功', timeout: 1000})
          } else {
            this.$dialog.toast({mes: '删除失败', timeout: 1000})
          }
        }
        )
        .catch(error => {
          console.log(error)
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    },
    // 上传成功
    success (response, file, fileList) {
      this.imglist.push(file.response.name) // 上传成功成功后图片的总数组
    },
    // 上传前预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 酒店建议提交
    submitHotel () {
      let than = this
      if (than.contents !== '') {
        than.$axios
          .post(apis + '/shenglian-fast/app/weixinapp/feedback', {
            itype: 0,
            userid: than.userid,
            praise: than.star,
            contents: than.contents,
            imgurl: than.imglist.toString()
          })
          .then(response => {
            if (response.data.msg === 'success') {
              than.imglist = []
              than.star = 5
              than.contents = ''
              than.fileList = []
              this.$dialog.toast({mes: '提交成功', timeout: 1000})
            } else {
              this.$dialog.toast({mes: '提交失败', timeout: 1000})
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
          })
      } else {
        this.$dialog.toast({mes: '建议不能为空', timeout: 1000})
      }
    },
    // 服务建议提交
    submitServer () {
      let than = this
      if (than.contents1 !== '') {
        than.$axios
          .post(apis + '/shenglian-fast/app/weixinapp/feedback', {
            itype: 1,
            userid: than.userid,
            praise: than.startwo,
            contents: than.contents1,
            imgurl: than.imglist.toString()
          })
          .then(response => {
            if (response.data.msg === 'success') {
              than.imglist = []
              than.startwo = 5
              than.contents1 = ''
              than.fileList = []
              this.$dialog.toast({mes: '提交成功', timeout: 1000})
            } else {
              this.$dialog.toast({mes: '提交失败', timeout: 1000})
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
          })
      } else {
        this.$dialog.toast({mes: '建议不能为空', timeout: 1000})
      }
    }
  },
  computed: {
    rateing () {
      if (this.star === 5) {
        return '满意'
      } else if (this.star === 4) {
        return '较好'
      } else if (this.star === 3) {
        return '一般'
      } else if (this.star === 2) {
        return '较差'
      } else if (this.star === 1) {
        return '很差'
      }
    },
    score () {
      if (this.startwo === 5) {
        return '满意'
      } else if (this.startwo === 4) {
        return '较好'
      } else if (this.startwo === 3) {
        return '一般'
      } else if (this.startwo === 2) {
        return '较差'
      } else if (this.startwo === 1) {
        return '很差'
      }
    }
  }
}
</script>

<style scoped>
#index {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  width: 100%;
  overflow-y: auto;
}
.footer-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.tab-box {
  font-size: 0;
}

.tab-box input {
  display: none;
}

.tab-box label {
  width: 48%;
  height: 47px;
  line-height: 47px;
  font-size: 15px;
  text-align: center;
  background-color: #fff;
  color: #d7d7d7;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
}

.tab-box-label {
  width: 100%;
  height: 47px;
  margin-top: 13px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab-content {
  padding: 13px;
  box-sizing: border-box;
  font-size: 14px;
  width: 100%;
  height: 100%;
  display: none;
}

.tab-content >>> .weui-cell__ft {
  display: flex;
  align-items: center;
}

.tab-content span {
  font-size: 12px;
  color: #999999;
  margin-left: 22px;
  margin-right: 43px;
}

.weui-cell {
  padding: 0;
}

.tab-content >>> .weui-cells {
  margin-top: 0;
  padding: 13px 0;
  font-size: 14px;
}
.complaints-title {
  padding: 15px 0;
}
.complaints-content {
  background-color: #f3f2f2;
  height: 135px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 12px;
  border: none;
  font-size: 12px;
  color: #999999;
  outline-style: none;
}
.hello {
  margin-top: 10px;
  margin-bottom: 40px;
}
.upload-img {
  margin-top: 8px;
}

.hello >>> .prompt {
  margin: 0;
  margin-left: 10px;
  line-height: 30px;
}
.footer-btn {
  width: 100%;
  padding: 17px 0;
  color: #ffffff;
  background-color: #92d4ef;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 15px;
}

.hello >>> .el-upload-list--picture-card .el-upload-list__item,
.hello >>> .el-upload--picture-card {
  height: 84px;
  width: 84px;
}
.hello >>> .el-upload--picture-card {
  line-height: 84px;
}
.tab-box
  input:nth-of-type(1):checked
  ~ .tab-contents
  .tab-content:nth-of-type(1),
.tab-box
  input:nth-of-type(2):checked
  ~ .tab-contents
  .tab-content:nth-of-type(2) {
  display: block;
}

.tab-box input:nth-of-type(1):checked ~ .tab-box-label label:nth-of-type(1),
.tab-box input:nth-of-type(2):checked ~ .tab-box-label label:nth-of-type(2) {
  background-color: #92d4ef;
  border: none;
  color: #fff;
}
.hello >>> .el-dialog {
  z-index: 2018;
  width: 85%;
}
.el-popup-parent--hidden .v-modal {
  display: none;
}
</style>
